<template>
	<view id="detail">
		<!-- <view v-html="articleObj">
			
		</view> -->
		
		<view style="padding: 16rpx;">
			<view class="title_wrap">
				<view class="title">{{articleObj.title}}</view>
				<text class="author">{{articleObj.author}}</text>
				<text class="time">{{articleObj.time}}</text>
			</view>
			
			<u-parse :selectable="true" :content="articleObj.content" @preview="preview" @navigate="navigate" ></u-parse>
		</view>
		<!-- <rich-text :nodes="details">{{articleObj}}</rich-text> -->
	</view>
</template>

<script>
	import { selectById } from '@/util/request/article.js'
	import marked from 'marked'
	import uParse from '@/components/u-parse/u-parse.vue'
	
	export default{
		components: {
		  uParse
		},
		data(){
			return {
				id: 0,
				articleObj: {}
			}
		},
		mounted() {
			
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id;//上个页面传递的参数。 
			this.getArticleDetail();
		},
		methods: {
			/**
			 * 根据文章id 获取单个文章
			 */
			getArticleDetail() {
				selectById({id: this.id}).then(res=>{
				
					this.articleObj = res.list;
					this.articleObj.content = marked(res.list.content);
					// console.log("this.articleObj", this.articleObj)
					// console.log("this.articleObj1", marked(res.list.content))
				})
			},
			 preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/components/u-parse/u-parse.css");
	#detail{
		.title_wrap{
			font-size: 28rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
			}
			.author{
				margin-right: 20rpx;
			}
		}
	}
	
	 
		text,
		span,
		p {
			user-select: text;
			-webkit-user-select: text;
		}
</style>


<!-- import marked from 'marked'
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: marked(`#hello, markdown!`)
    }
  }
}
 -->
<!-- <template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>
  </div>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: "``` <div>div代码</div>```"
				
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("@/components/u-parse/u-parse.css");
</style> -->
